<!-- 商家销售统计横向柱状图 -->

<template>
	<div class="com-container">
		<div class="com-chart" ref="seller_ref"></div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	import { getThemeValue } from '@/utils/theme_utils'
	
	export default {
		data() {
			return {
				chartInstance: null,
				allData: [],
				currentPage: 1,
				totalPage: 0,
				timeId: null,
			}
		},

		mounted() {
			this.intiChart()
			this.getData()
			window.addEventListener('resize', this.screenAdapter)
			this.screenAdapter()
		},

		destroyed() {
			clearInterval(this.timeId)
			window.removeEventListener('resize', this.screenAdapter)
		},
		
		computed: {
			...mapState(['theme']),
			color() {
				return getThemeValue(this.theme).titleColor
			} 
		},
		
		watch: {
			theme() {
				this.chartInstance.dispose()
				this.intiChart()
				this.screenAdapter()
				this.updateChart()
			}
		},

		methods: {
			intiChart() {
				this.chartInstance = this.$echarts.init(this.$refs.seller_ref, this.theme)

				const initOption = {
					title: {
						text: '▎商家销售统计',
						left: 20,
						top: 20
					},
					grid: {
						top: '20%',
						left: '3%',
						right: '6%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'value'
					},
					yAxis: {
						type: 'category',
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							z: 0,
							type: 'line',
							lineStyle: {
								color: '#2d3443'
							}
						}
					},

					series: [{
						type: 'bar',
						label: {
							show: true,
							position: 'right',
							textStyle: {
								color: this.color
							}
						},
						itemStyle: {
							color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
									offset: 0,
									color: '#5052EE'
								},
								{
									offset: 1,
									color: '#ab6ee5'
								}
							])
						},
					}]
				}
				this.chartInstance.setOption(initOption)

				this.chartInstance.on('mouseover', () => {
					clearInterval(this.timeId)
				})
				this.chartInstance.on('mouseout', () => {
					this.startInterval()
				})
			},
			async getData() {
				const {
					data: res
				} = await this.$http.get('/seller')
				this.allData = res
				this.allData.sort((a, b) => {
					return b.value - a.value
				})
				this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1

				this.updateChart()
				this.startInterval()
			},
			updateChart() {
				const start = (this.currentPage - 1) * 5
				const end = this.currentPage * 5
				const showData = this.allData.slice(start, end)

				const sellerNames = showData.map(item => {
					return item.name
				})
				const sellerValues = showData.map(item => {
					return item.value
				})

				const dataOption = {
					yAxis: {
						data: sellerNames
					},
					series: [{
						data: sellerValues,
					}]
				}
				this.chartInstance.setOption(dataOption)
			},

			startInterval() {
				if (this.timeId) {
					clearInterval(this.timeId)
				}
				this.timeId = setInterval(() => {
					this.currentPage++
					if (this.currentPage > this.totalPage) {
						this.currentPage = 1
					}
					this.updateChart()
				}, 3000)
			},

			screenAdapter() {
				const titleFontsize = this.$refs.seller_ref.offsetWidth / 100 * 3.6
				const adapterOption = {
					title: {
						textStyle: {
							fontSize: titleFontsize
						},
					},

					tooltip: {
						lineStyle: {
							width: titleFontsize,
						}
					},

					series: [{
						barWidth: titleFontsize,
						itemStyle: {
							barBorderRadius: [0, titleFontsize / 2, titleFontsize / 2, 0]
						}
					}]
				}
				this.chartInstance.setOption(adapterOption)
				this.chartInstance.resize()
			}
		}
	}
</script>

<style lang="less" scoped>

</style>
